<template>
	<view>
		<my-search @click="getmy"></my-search>
		<view class="box">
			<scroll-view class="boxl" scroll-y :style="{height:wh+'px'}">
				<block v-for="(item,i) in sj" :key="i">
					<view :class="['lyy', i===add ? 'ac' : '']" @click="setadd(i)">{{item.cat_name}}</view>
					
				</block>
			</scroll-view>
			<scroll-view class="boxr" scroll-y :style="{height:wh+'px'}" :scroll-top="scrolltop">
				<view v-for="(item2,index) in sj2" :key="index">
					<view class="text">
						/{{item2.cat_name}}/
						</view>
						<view class="Boxp">
						<view v-for="(item3,index3) in item2.children" :key="index3" class="hezi" @click="setadd3(item3)">
							<image :src="item3.cat_icon" ></image>
							<view>{{item3.cat_name}} </view>
						</view>
						</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wh:0,
				sj:[],
				add:0,
				sj2:[],
				scrolltop:0,
				
			};
		},
		methods:{
			async getac(){
					const {data:s}=await uni.$http.get('/api/public/v1/categories')
					console.log(s)
					if(s.meta.status !==200) return uni.$showMsg();
					this.sj = s.message;
					this.sj2= this.sj[0].children
					console.log('都好得很',this.sj)
			},
			// 二级分类的点击事件
			setadd(i){
				this.add=i
				this.sj2= this.sj[i].children
				this.scrolltop = this.scrolltop ===0 ? 1 :0
			},
			// 三级分类的点击事件
			setadd3(item){
				uni.navigateTo({
					url:'../../subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			// 搜索组件的单击事件
			getmy(){
				console.log('ok');
				uni.navigateTo({
					url:"../../subpkg/search/search"
				})
			}
		},
		onLoad() {
			const iwh =uni.getSystemInfoSync();
				console.log(iwh)
				this.wh = iwh.windowHeight-70
				this.getac()
				
			}
		}
	
</script>

<style lang="scss">
	.lyy{
		border: solid 1px #f9f9f9;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		
		&.ac{
			background-color: #FFFFFF;
			position: relative;
			&::before{
				content: ' ';
				display: block;
				width: 3px;
				height: 30px;
				background-color: #c00000;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		
	}
	.rxx{
		border: solid 1px #4CD964;
		height: 40rpx;
		line-height: 40rpx;
	}
	.box{
		display: flex;
		// justify-content: space-around;
	}
	.boxl{
		width: 120px;
		
	}
	.text{
		text-align: center;
		line-height: 60rpx;
		font-weight: 900;
	}
	.hezi{
	
		width: 33.33%;
		justify-content: space-around;
		
		flex-direction: column;
		text-align: center;
		font-size: 12px;
		text-align: center;
	}
	.hezi image{
		width: 60px;
		height: 60px;
			  
	}
	.Boxp{
		display: flex;
		flex-wrap: wrap;
		
	}
</style>
